<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sClwXDCZC6GLOdLlYevqoiEzfaUFzqP3"></script>
    <title>郑大3D视角动画</title>
    <style>
        .anchorBL{
            display:none
        }
    </style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var bmap = new BMapGL.Map("allmap");    // 创建Map实例
    bmap.centerAndZoom(new BMapGL.Point(113.542146,34.823709), 18);  // 初始化地图,设置中心点坐标和地图级别
    bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    bmap.setTilt(50);      // 设置地图初始倾斜角
    // 定义关键帧
    var keyFrames = [
        {
            center: new BMapGL.Point(113.541185,34.823831),
            zoom:18,
            tilt: 50,
            heading: 0,
            percentage: 0
        },
        {
            center: new BMapGL.Point(113.540875,34.819535),
            zoom: 19,
            tilt: 70,
            heading: 0,
            percentage: 0.1
        },
        {
            center: new BMapGL.Point(113.543417,34.820224),
            zoom:18,
            tilt: 70,
            heading: 0,
            percentage: 0.25
        },
        {
            center: new BMapGL.Point(113.541576,34.821787),
            zoom:19,
            tilt: 70,
            heading: -90,
            percentage: 0.35
        },
        {
            center: new BMapGL.Point(113.543031,34.824261),
            zoom: 18,
            tilt: 70,
            heading: -90,
            percentage: 0.45
        },
        {
            center: new BMapGL.Point(113.544217,34.824224),
            zoom: 19,
            tilt: 70,
            heading: -180,
            percentage: 0.55
        },
        {
            center: new BMapGL.Point(113.54401,34.827239),
            zoom:18,
            tilt: 70,
            heading: -180,
            percentage: 0.75
        },
        {
            center: new BMapGL.Point(113.540911,34.827335),
            zoom:19,
            tilt: 70,
            heading: -270,
            percentage: 0.85
        },
        {
            center: new BMapGL.Point(113.53721,34.82635),
            zoom:18,
            tilt: 70,
            heading: -360,
            percentage: 0.95
        },
        {
            center: new BMapGL.Point(113.541167,34.823457),
            zoom:19,
            tilt: 50,
            heading: -360,
            percentage: 1
        },
    ];

    var opts = {
        duration: 10000,
        delay: 5000,
        interation: 'INFINITE'
    };

    // 声明动画对象
    var animation = new BMapGL.ViewAnimation(keyFrames, opts);
    // 监听事件
    animation.addEventListener('animationstart', function(e){console.log('start')});
    animation.addEventListener('animationiterations', function(e){console.log('onanimationiterations')});
    animation.addEventListener('animationend', function(e){console.log('end')});
    // 开始播放动画
    setTimeout('bmap.startViewAnimation(animation)', 00);
</script>
